$background-color: #15414c;
$text-color: #5d7c83;
$link-color: #fff;

// Top Bar
$topbar-background: #002b36;
$selected-dropdown-background: #073642;
$hover-dropdown-color: #ffffff;

// Editor Top Bar
$editor-button-color: #ffffff;
$editor-background: #15414c;
$hover-editor-button-color: #859900;

// Drop Down
$submenu-border-color: rgba(255,255,255,0.05);
$submenu-text-color: #fffffff;
$hover-submenu-dropdown-color: #859900;
$submenu-background-color: #7dc8e5;

// Sidebar
$sidebar-background: #073642;
$selected-option-background: #859900;
$hover-option-color: #859900;
$selected-option-color: #ffffff;
$option-color: #ffffff;
$worksheet-enabled: #859900;

// Console
$console-text-color: #ffffff;
$console-border-color: #073642;
$console-background: #002b36;
$hidden-console-background: #002b36;
$switcher-show-color: $console-text-color;

// Snippets
$snippets-background: #15414c;
$snippets-text-color: #0b6623;
$snippets-update-color: #859900;
$snippets-line-color: #859900;
$snippet-background-color: #073642;
$title-line-color: rgba(255, 255, 255, 0.12);

// Settings
$input-background-color: #073642;
$selected-radio-color: #859900;
$input-color: #fff;
$search-link-color: #859900;

// Codemirror
$cm-color: #839496;
$cm-background-color: #15414c;
$cm-border-bottom-color: #073642;
$cm-gutters-filler-background-color: #15414c;
$cm-selected-background: rgba(255, 255, 255, 0.1);
$cm-dialog-color: #586e75;
$cm-simplescroll-background: #859900;

$cm-cursor: #859900;

$cm-s-background-color: #073642;
$cm-gutters-border-color: #073642;
$cm-gutters-linenumber-color: #839496;
$cm-active-hint-background: #7dc8e5;
$cm-active-hint-text: #002b36;

.scastie {
  .dark {
    .main-panel {
      background-color: $cm-background-color; 
    }
  }

  .code, .configuration {
    .cm-s-solarized.cm-s-dark {
      color: $cm-color;
      background-color: $cm-background-color;

      .CodeMirror-cursor {
        border-left-color: $cm-cursor;
      }

      .CodeMirror-simplescroll-vertical div,
      .CodeMirror-simplescroll-horizontal div {
        background: $hover-option-color;
      }
      
      .CodeMirror-hints {
        background: $snippet-background-color;
      }

      li.CodeMirror-hint-active {
        background: $cm-active-hint-background;
        color: $cm-active-hint-text;
      }

      .CodeMirror-gutters {
        border-right: 1px solid $cm-gutters-border-color;
        background-color: $cm-background-color;
      }

      .CodeMirror-linenumber {
        color: $cm-gutters-linenumber-color;
      }
    }
  }
}
